<template>
  <div class="fxs">
    <el-input :prefix-icon="Search" v-model="tableData.extra[modelKey]" :placeholder="placeholder" maxlength="200" clearable />
    <sys-search-btn :show-fold="false" :loading="loading" :resets="resets" :cleanExtra="cleanExtra" />
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
defineProps({
  /**
   * 输入框的placeholder
   */
  placeholder: { type: String, default: '请输入内容' },
  /**
   * 搜索按钮的加载状态（非必须）
   */
  loading: Boolean,
  // 默认搜索
  modelKey: { type: String, default: 'keyword' },
  /**
   * 重置的默认值，不会重置该默认值
   */
  resets: { type: Object, default: null },
  /**
   * 是否清空全部值
   */
  cleanExtra: { type: Boolean, default: true }
})
const tableData = inject<TableData>('tableData') as TableData
</script>

<style lang="scss" scoped>
.ep-input {
  max-width: 30rem;
  margin-right: 0.75rem;
}
</style>
